<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>医院展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <base th:href="${#request.getContextPath()}+'/'">
    <link rel="stylesheet" href="static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="static/layuiadmin/style/admin.css" media="all">
    <style type="text/css">
        #test-carousel-img img, .img-list img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <!-- 轮播 -->
                    <div class="layui-card-header">医院风采</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel" id="test-carousel-img" lay-anim="" lay-indicator="inside"
                             lay-arrow="hover"
                             style="width: 80%; height: 400px;">
                            <div carousel-item="">
                                <div class="layui-this"><img
                                        src="http://孙宇豪.online:8080/images/d54d47fc-2573-4ee1-bd19-c6dbcab0e669.jpg">
                                </div>
                                <div class=""><img
                                        src="http://孙宇豪.online:8080/images/5ce12b45-d372-4bde-85e9-7badd3a88f37.jpg">
                                </div>
                                <div class=""><img
                                        src="http://孙宇豪.online:8080/images/f21f00d3-3dbc-4be6-a72e-b51d57330dde.jpg">
                                </div>
                                <div class=""><img
                                        src="http://xn--r8s0d654n.online:8080/images/f18156b1-bc03-49b9-b0e0-7b14b3797a33.jpg">
                                </div>
                                <div class=""><img
                                        src="http://xn--r8s0d654n.online:8080/images/6be55a59-133a-430e-9904-e79553bf8fc1.jpg">
                                </div>
                            </div>
                            <div class="layui-carousel-ind">
                                <ul>
                                    <li class=""></li>
                                    <li class="layui-this"></li>
                                    <li class=""></li>
                                    <li class=""></li>
                                    <li class=""></li>
                                    <li class=""></li>
                                    <li class=""></li>
                                </ul>
                            </div>
                            <button class="layui-icon layui-carousel-arrow" lay-type="sub"></button>
                            <button class="layui-icon layui-carousel-arrow" lay-type="add"></button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">热门医院</div>
                        <div class="layui-card-body">
                            <div class="layui-row layui-col-space10">
                                <div class="img-list">
                                    <div class="layui-fluid" style="padding:0">
                                        <div class="layui-row layui-col-space30 space">
                                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                                                <div class="item">
                                                    <img src="http://img.114yygh.com/naja/hospital/1.jpg"
                                                         layer-index="1">
                                                    <div class="cont-text">
                                                        <div class="data">北京协和医院</div>
                                                        <p class="address"><i
                                                                class="layui-icon layui-icon-location"></i><span>北京市东城区帅府园一号</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                                                <div class="item">
                                                    <img src="http://img.114yygh.com/naja/hospital/12.jpg"
                                                         layer-index="3">
                                                    <div class="cont-text">
                                                        <div class="data">北京大学第一医院</div>
                                                        <p class="address"><i
                                                                class="layui-icon layui-icon-location"></i><span>北京西城区西什库大街八号</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4">
                                                <div class="item">
                                                    <img src="http://img.114yygh.com/naja/hospital/162.jpg"
                                                         layer-index="2">
                                                    <div class="cont-text">
                                                        <div class="data">中国人民解放军总医院</div>
                                                        <p class="address"><i
                                                                class="layui-icon layui-icon-location"></i><span>北京市海淀区复兴路28号</span>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">待办事项</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
                                <div carousel-item>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs6">
                                            <a lay-href="app/content/comment.html" class="layadmin-backlog-body">
                                                <h3>待审评论</h3>
                                                <p><cite>66</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="app/forum/list.html" class="layadmin-backlog-body">
                                                <h3>待审帖子</h3>
                                                <p><cite>12</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="template/goodslist.html" class="layadmin-backlog-body">
                                                <h3>待审商品</h3>
                                                <p><cite>99</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" onclick="layer.tips('不跳转', this, {tips: 3});"
                                               class="layadmin-backlog-body">
                                                <h3>待发货</h3>
                                                <p><cite>20</cite></p>
                                            </a>
                                        </li>
                                    </ul>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs6">
                                            <a href="javascript:;" class="layadmin-backlog-body">
                                                <h3>待审友情链接</h3>
                                                <p><cite style="color: #FF5722;">5</cite></p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">数据概览</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-dataview">
                                <div carousel-item id="LAY-index-dataview">
                                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-tab layui-tab-brief layadmin-latestData">
                            <ul class="layui-tab-title">
                                <li class="layui-this">今日热搜</li>
                                <li>今日热帖</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <table id="LAY-index-topSearch"></table>
                                </div>
                                <div class="layui-tab-item">
                                    <table id="LAY-index-topCard"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="static/layuiadmin/layui/layui.js?t=1"></script>
<script>
    layui.config({
        base: 'static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console', 'carousel', 'form'], function () {

        var carousel = layui.carousel
            , form = layui.form;
        //常规轮播
        carousel.render({
            elem: '#test-carousel-normal'
            , arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test-carousel-normal-2'
            , interval: 1800
            , anim: 'fade'
            , height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test-carousel-demo'
        });
        //图片轮播
        carousel.render({
            elem: '#test-carousel-img'
            , width: '100%'
            // , height: (W/b).toString()+"px"
            , height: "440px"
            , interval: 5000
        });


        //事件
        carousel.on('change(test-carousel-demo)', function (res) {
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(test-carousel-autoplay)', function () {
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.test-carousel-demoSet').on('keyup', function () {
            var value = this.value
                , options = {};
            if (!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.test-carousel-demoTest .layui-btn').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>


</body>
</html>

